import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { placeholderDefaultProps } from './defaultProps';
import type { PlaceholderOptions } from './type';
import PlaceholderHeader from './PlaceholderHeader';
import PlaceholderLine from './PlaceholderLine';
import PlaceholderParagraph from './PlaceholderParagraph';
import PlaceholderImage from './PlaceholderImage';

export interface PlaceholderProps extends PlaceholderOptions, HTMLAttributes<HTMLDivElement> {}

interface PlaceholderInterface extends FC<PlaceholderProps> {
  Header: typeof PlaceholderHeader;
  Line: typeof PlaceholderLine;
  Paragraph: typeof PlaceholderParagraph;
  Image: typeof PlaceholderImage;
}

const Placeholder: PlaceholderInterface = (props) => {
  const { className, fluid, inverted, children, forwardedRef, ...placeholderProps } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames('ui', { fluid, inverted }, 'placeholder', className),
      ...placeholderProps,
    },
    children,
  );
};

Placeholder.displayName = 'Placeholder';
Placeholder.defaultProps = placeholderDefaultProps;

Placeholder.Header = PlaceholderHeader;
Placeholder.Line = PlaceholderLine;
Placeholder.Paragraph = PlaceholderParagraph;
Placeholder.Image = PlaceholderImage;

export default Placeholder;
